<template>
  <div>
    <el-container>
      <el-header
        style="background-color: #b71b24; display: flex; align-items: center"
      >
        <img src="@/assets/img/logo5.png" alt="" style="height: 135%" />
        </el-header
      >

      <el-container>
        <el-aside width="200px" style="height: 100vh">
          <el-menu
            :default-active="$store.state.path"
            background-color="#b71b24"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-order"></i> <span>订餐</span></template
              >

              <el-menu-item-group>
                <el-menu-item
                  v-for="(item, index) in classList"
                  :index="'1-' + index"
                  :key="index"
                  @click="handleClickFoodMenu(item.id)"
                >
                  <span>{{ item.menuname }}</span></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2" @click="handleClickMenu('orderList')">
              <i class="el-icon-s-claim"></i>
              <span slot="title">订单</span>
            </el-menu-item>
            <el-menu-item index="3" @click="handleClickMenu('notice')">
              <i class="el-icon-message-solid"></i>
              <span slot="title">公告</span>
            </el-menu-item>
            <!-- <el-menu-item index="4" @click="handleClickMenu('register')">
              <i class="el-icon-plus"></i>
              <span slot="title">添加客人</span>
            </el-menu-item> -->
          </el-menu>
        </el-aside>
        <el-main style="width: calc(100vw - 200px); height: calc(100vh - 60px)">
          <el-card><router-view></router-view> </el-card>
        </el-main>
      </el-container>
    </el-container>
    <div
      class="car"
      v-if="
        $route.path != '/register' &&
        $route.path != '/foodDetail' &&
        $route.path != '/order' &&
        $route.path != '/notice' &&
        $route.path != '/orderList'
      "
      v-show="showPrice && total != 0"
    >
      <div>
        <span style="color: #fff; font-size: 25px; font-weight: 700"
          >合计：</span
        >
        <span style="color: red; font-size: 25px; font-weight: 700">{{
          total
        }}</span>
      </div>
      <div>
        <el-button type="success" @click="dialogVisible = true">已点</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="danger" @click="clear">清空</el-button>
      </div>
    </div>
    <el-dialog title="已点菜单" :visible.sync="dialogVisible" width="80%">
      <el-table
        :data="foodList"
        style="width: 100%"
        @cell-click="handleDelete"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column prop="menuname" label="菜名" align="center">
        </el-table-column>
        <el-table-column prop="num" label="数量/份" align="center">
          <template slot-scope="scoped">
            <el-input-number
              size="mini"
              v-model="scoped.row.num"
              :min="1"
              :max="10"
              @change="handleNumChange"
            ></el-input-number>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="单价" align="center">
        </el-table-column>
        <el-table-column label="总价" align="center">
          <template slot-scope="scoped"
            >￥{{ scoped.row.num * scoped.row.price }}</template
          >
        </el-table-column>

        <el-table-column prop="remark" label="操作" align="center">
          <template slot-scope="">
            <i class="el-icon-remove" style="color: red; cursor: pointer"></i>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <span style="color: red; font-weight: 700; font-size: 22px; float: left"
          >总价：￥{{ total }}</span
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitOrder"
          >提交订单</el-button
        >
      </span>
    </el-dialog>
    <!-- 提交订单弹窗 -->
    <el-dialog
      title="确认订单"
      width="50%"
      :visible.sync="confirmDialogFormVisible"
    >
      <el-row style="color: #212121; font-weight: 700; padding-bottom: 15px">
        <el-col :span="8">菜名</el-col>
        <el-col :span="8">数量/份</el-col>
        <el-col :span="8">单价/元</el-col>
      </el-row>
      <div
        style="
          height: 180px;
          overflow: overlay;
          padding: 10px;
          margin: -10px;
          border: 1px solid #eee;
        "
      >
        <el-row
          v-for="(item, index) in foodList"
          :key="index"
          style="padding: 5px 0"
        >
          <el-col :span="8">{{ item.menuname }}</el-col>
          <el-col :span="8">x{{ item.num }}</el-col>
          <el-col :span="8">{{ item.price }}</el-col>
        </el-row>
      </div>
      <el-form label-width="120px" style="margin-top: 20px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="预约日期">
              <el-date-picker
                v-model="obj.datetim"
                type="date"
                placeholder="选择日期"
                style="width: 75%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持续时间">
              <el-input-number
                v-model="obj.totaltime"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="桌数">
              <el-input-number v-model="obj.desk" :min="1"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人数">
              <el-input-number
                v-model="obj.totalpeople"
                :min="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定金">
              <el-input-number
                v-model="obj.subscription"
                :min="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人">
              <el-input disabled :value="phone" style="width: 75%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="footer">
        <div style="font-size: 20px; font-weight: 700">
          <span>总价</span>
          <span style="color: red">￥{{ total }}</span>
        </div>
        <div>
          <el-button @click="confirmDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmitConfirm"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bus from "../../plugins/bus";
export default {
  data() {
    return {
      dialogVisible: false,
      dateValue: undefined,
      confirmDialogFormVisible: false,
      remark: "",
      classList: [],
      showPrice: false,
      // 已点的菜单列表
      foodList: [],
      total: 0,
      obj: {
        datetim: "",
        totaltime: "",
        totalpeople: "",
        desk: "",
        subscription: "",
      },
      phone: sessionStorage.getItem("phone"),
    };
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow:hidden;");
    document.querySelector("html").setAttribute("style", "overflow:hidden;");
  },
  created() {
    this.getClassData();
    let _this = this;
    bus.$on("add", function (item) {
      let flag = _this.foodList.find((item1) => item.id == item1.id);
      if (flag) {
        flag.num++;
        _this.total += item.num * item.price;
        return;
      }
      _this.total += item.num * item.price;
      _this.foodList.push(item);
      _this.showPrice = true;
    });
  },

  methods: {
    clear() {
      this.$confirm("是否清空已选菜品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.foodList = [];
          this.total = 0;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSubmitOrder() {
      if (this.foodList.length == 0) {
        return this.$message.warning("未选择菜品");
      }
      this.confirmDialogFormVisible = true;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      column.rowindex = rowIndex;
    },

    handleDelete(row, column) {
      if (column.index == 4) {
        // console.log(row.index)
        this.foodList.splice(column.rowindex, 1);
        this.handleNumChange();
      }
    },
    handleNumChange() {
      let total = 0;
      this.foodList.forEach((item) => {
        total += item.num * item.price;
      });
      // console.log(total);
      this.total = total;
    },
    async getClassData() {
      const { data: res } = await this.$http.get(
        "/banservice/firstmenu/getfirstmenu"
      );
      this.classList = res.data.list;
    },
    handleSubmit() {
      this.confirmDialogFormVisible = true;
    },
    async handleSubmitConfirm() {
      this.obj.totalpay = this.total;
      this.obj.userId = this.phone;
      if (this.obj.datetim) {
        this.obj.datetim =
          this.obj.datetim.getFullYear() +
          "-" +
          (this.obj.datetim.getMonth() - 0 + 1) +
          "-" +
          this.obj.datetim.getDate();
      }
      this.obj.detial = JSON.stringify(this.foodList);
      await this.$http.post("/banservice/orderl/addorder", this.obj);
      this.$message.success("订餐成功");
      this.total = 0;
      this.foodList = [];
      this.confirmDialogFormVisible = false;
    },
    handleClickMenu(url) {
      if (this.$route.path == "/" + url) return;
      this.$router.push("/" + url);
    },
    handleClickFoodMenu(id) {
      if (this.$route.query.id == id) return;
      this.$router.push({
        path: `/foodList`,
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
// /deep/ .el-menu {
//   height: 100% !important;
// }
.el-aside {
  background-color: #b71b24;
}
.el-card {
  overflow: overlay;
  /deep/ .el-card__body {
    padding: 20px;
    height: calc(100vh - 142px);
  }
}
.el-aside {
  i {
    color: #fff !important;
  }
}
/deep/ .el-submenu__title i {
  color: #fff !important;
}
.el-header {
  display: flex;
  justify-content: space-between;
}
.car {
  width: calc(100% - 280px);
  height: 70px;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 200px;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>